<template>
  <div>
    <div class="nav">
      <van-nav-bar
  title="搜索"
  left-text="返回"
 
 
  @click-left="onClickLeft"
 
/> </div>
    <div class="head">
      <div @click="priceReverse" :class="{active:!isClick}">按价格排序</div>
      <div @click="buyReverse" :class="{active:isClick}">按销量排序</div>
    </div>

    <div v-if="!searchList.length" class="empty"> 
   
          <img src="@assets/empty.png" alt=""> 
             <p>暂无商品</p>
    </div>
    <div  v-else class="search-list">
      .
    <van-card  v-for="item in searchList" :key="item.id" @click="$router.push({
      path:'/category',
      query:item
    })"
  :num="item.num"
  :price="item.price.toFixed(2)"
  :title="item.name"
  :thumb="item.imgs.split('||')[0]"
  currency="￥"
  :lazy-load="isinstall"
  
>
<template #tags>
    
  </template>
  <template #footer>
    
     <van-icon name="shopping-cart-o" tag="p" @click.stop="insert(item)" />
  </template>
</van-card>
 

</div>
  </div>
</template>

<script>
//引入 搜索方法

import {fetchCateLocal} from '@api'
import {Toast} from 'vant'
import{ mapMutations} from 'vuex'
  export default {
    data(){
      return{
        searchList:{},
        searchDate:{},
        isClick:false,
        isinstall:true,
        buyCartData:[],
        isfalse:false

      }
    },
        created(){
         
          console.log(this.$route.query.goodName);
          fetchCateLocal({
          query: this.$route.query.goodName,
          page: 1,
          size: 9,
        }).then((res) => {
          if (res.data.code === 200) {
            this.searchDate=res.data.data
            this.searchList = res.data.data.buynum;
            console.log(res.data.data);
            console.log(this.searchList.length,111111);
          }
        });
        },
        methods:{
         ...mapMutations(['changeNum','insert']),
         //放回上一页
          onClickLeft(){
            this.$router.go(-1)
          },
          //按金额排序
          priceReverse(){
            this.isClick=false
            if(this.searchList===this.searchDate.money){
              this.searchList=this.searchDate.money.reverse()
            }else{
            this.searchList=this.searchDate.money
            }

          },
          //按销量排序
          buyReverse(){
             this.isClick=true
             if(this.searchList===this.searchDate.buynum){
              this.searchList=this.searchDate.buynum.reverse()
            }else{
            this.searchList=this.searchDate.buynum
            }
          },
         
          
        }
  }
</script>

<style lang="scss" scoped>
.nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.head{
  width: 100%;
  height: 20px;
  background: white;
  display: flex;
  align-items: center;
  font-size: 12px;
  position: fixed;
  top: 46px;
  left: 0;
  z-index: 10;
  
  div{
flex: 1;
  }
}
.van-icon-shopping-cart-o{
  font-size: 26px;
  color: orange;
}
.van-card__price{
  color: orange;
}
.search-list{
  padding-top: 66px;
  width: 100%;
}
.active{
  color: orange;
}
.empty{
  padding-top: 200px ;
  text-align: center;
  color: #aaa;
  img{
    width: 100px;
  }

}
</style>